Débuter en JavaScript

Ce TD nécessite de connaître les bases en JavaScript (variables, boucles, tests, commentaires, etc.). Nous utiliserons également un unique fichier pour écrire notre code html, css et javascript.

On pourra utiliser à nouveau la page exemple suivante, l'éditez avec Notepad++ et l'affichez dans Firefox.

En JavaScript, on peut sélectionner des éléments de la page (comme des titres, des boutons, des images, du texte) et les faire modifier par un programme que l'on a créé. Cela rend les pages dynamiques. Une balise HTML peut être repérée par un identifiant unique id. Cela permet de la reconnaître parmi les autres. Si un paragraphe est plus important que les autres, on peut l'identifier comme ceci :

Dans la CSS, on peut donner un style particulier à ce paragraphe en particulier de la manière suivante : #paragraphe_important{ color:red; font-size:15px; ... } Attention chaque ligne doit finir par un ";" A l'aide de l'inspecteur, trouver l'identifiant de ce block d'exercice. Un ensemble de balises HTML peut être repérée par un nom de classe (class). Cela permet de les reconnaître parmi les autres. Si il y a plusieurs paragraphes importants, on peut les repérer comme ceci :

...

Dans la CSS, on peut donner un style particulier à tous ces paragraphes de la manière suivante : .paragraphes_ok{ color:green; font-size:12px; }
A l'aide de l'inspecteur, trouver la classe des blocs représentant du code html et css dans l'enoncé.

Les navigateurs structurent chaque page sous la forme d'une structure d'arbre appelé l'arbre DOM (Document Object Model). Le sommet de cet arbre est le document, son fils est le html qui a lui même pour fils head, body, et ainsi de suite selon les balises HTML :

Chaque élément de cet arbre est un objet qui peut être modifié par le JavaScript, et modifie la page en temps réel. La racine de l'arbre est accessible via la variable réservée document

Dans la console, exécuter les commandes alert(document) et alert(document.children). Il s'agit d'objets HTML du document. Il est possible d'accéder à un élément HTML de la page qui possède un id en tapant document.getElementById('monId') Dans la console, exécuter la commande alert(document.getElementById('michel')). Il s'agit encore d'un objet HTML du document. Bien sûr, il n'est utile de sélectionner un élément que pour en faire quelque chose, c'est ce que nous allons faire :

Pour modifier le contenu HTML d'un élément donc on connaît l'id, on modifie l'attribut innerHTML :

document.getElementById('monId').innerHTML="écrire ici un nouveau contenu" Comme la syntaxe est un peu longue, ne pas hésiter à utiliser des variables comme ceci : var el=document.getElementById('monId') el.innerHTML="écrire ici un nouveau contenu"
  • À l'aide de l'inspecteur, trouver l'id de cette consigne.
  • Dans la console, taper une commande qui remplace cet énoncé par un smiley :)
Pour modifier le style CSS d'un élément donc on connaît l'id, on modifie l'attribut style, et ses attributs CSS. De manière générale : document.getElementById('monId').style.attribut=valeur On commence par sélectionner l'élément avec var el=document.getElementById('monId')
  • Pour modifier la couleur du texte, on tape el.style.color='red'
  • Pour modifier la couleur du fond, on tape el.style.backgroundColor='#FF4511'
  • Pour ne pas afficher un élément, on tape el.style.display='none'
Les noms des attributs sont les mêmes que dans la CSS sauf ceux avec un tiret. Il faut alors mettre une majuscule. On a vu que 'background-color' devient 'backgroundColor'
  • À l'aide de l'inspecteur, trouver l'id de cet exercice.
  • Changer la couleur du texte, la couleur du fond, mettre le texte en gras, puis masquer la consigne.
Les commandes javascript peuvent se lancer :
  • toutes seules avec le chargement de la page : c'est ce que l'on a fait au début
  • dans la console, mais ça n'est pas très utile pour un non-expert
  • se lancer via des événements : cela donne une impression de dynanisme, d'intéraction avec l'utilisateur. La page devient plus vivante.

Nous allons utiliser l'évènement onclick qui permet de détecter lorsqu'un élément de la page est cliqué et qui permet d'exécuter du JavaScript.

Sur un bouton (ou un lien, ou tout autre objet), la syntaxe HTML est la suivante Dans votre fichier, ajouter un bouton avec le texte "clique-moi !" qui déclenche un message disant "j'ai réussi !" Modifier le code précédent pour qu'en cliquant sur le bouton, le message affiché dise "Vous avez cliqué n fois" avec le bon nombre. Appeler une fonction permet de ne pas surcharger votre page html avec du code javascript qui se répète. Il est donc important de toujours créer des fonctions qui regroupent les instructions souhaitées. En JavaScript, la déclaration d'une fonction se rédige de la manière suivante : function nom_de_la_fonction(argument1, argument2){ //instructions return valeur_finale } La fonction est définie mais ne s'exécute pas encore. On peut l'exuter autant de fois que l'on veut avec différents arguments de la manière suivante : //appel simple avec argument1=0 et argument2=-2 nom_de_la_fonction(0, -2) //appel dans un calcul : nom_de_la_fonction(4,1)*2 + nom_de_la_fonction(0,0) Pour alléger l'écriture, on utilise souvent des fonctions dans des évènements onclick : Créer une fonction "somme(arg1,arg2)" qui prend en arguments deux entiers arg1 et arg2 et calcule la somme de tous les entiers entre arg1 et arg2. Créer 3 boutons qui calculent respectivement la somme de 0 à 10, de 0 à 50 et de 0 à 100.

Et pour finir, il va falloir être astucieux et mettre en pratique tout ce qui a été dit :

Créer un bouton qui permet de changer la couleur de la phrase "ceci est une page de test" en vert, ou bien en rouge si celle-ci est déjà en vert.